





















<template>
	<view class="new-task">
		
		<view class="new-container">
			<view class="n-titles">
				<text class="n-t-text n-title">待办内容：</text>
				<input class="n-t-input" type="text" placeholder="请输入待办标题"/>
			</view>
			
			<view class="n-time-start">
				<view class="uni-form-item uni-column">
					  <picker @change="examinationType" :range="hourTime">
						  <label class="n-title">开始时间：</label>
						  <label class="left">{{ startHT }}</label>
					  </picker>
					  <picker @change="examinationType" :range="minuteTime">
						  <label class="right">{{ startMT }}</label>
					  </picker>
				</view>
				
			</view>
			
			<view class="n-time-end">
				<view class="uni-form-item uni-column">
					<picker @change="examinationType" :range="hourTime">
						<label class="n-title">结束时间：</label>
						<label class="left">{{ endHT }}</label>
					</picker>
					<picker @change="examinationType" :range="minuteTime">
						<label class="right">{{ endMT }}</label>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="n-n-btn" @click="backAgency">
			<text>确认新建</text>
		</view>
	</view>
</template>

<script>

	const time = {
		hourTime:[],
		minuteTime:[]
	}

	for(let i=0; i<25;i++){
		if(i<10){
			time.hourTime[i] = '0'+i;
			time.minuteTime[i] = '0'+i;
			continue;
		}
		time.hourTime[i] = i;
		time.minuteTime[i] = i;
		
	}

	for(let j=25;j<61;j++){
		time.minuteTime[j]=j;
	}

	const hourTime = time.hourTime;
	const minuteTime = time.minuteTime;

	console.log(111)
	console.log(hourTime)
	export default {
		data() {
			return {
				hourTime:hourTime,
				minuteTime:minuteTime,
				
				startHT:hourTime[0],
				startMT:hourTime[0],
				endHT:hourTime[0],
				endMT:hourTime[0]
			}
		},
		methods: {
			backAgency(){
				uni.navigateBack({
					delta:1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	div{
		font-size: 14px;
	}
	// 待办容器
	.new-task{
		width:100%;
		height:100%;
		padding:4%;
		font-size:14px;
	}
	
	.new-container{
		height:80%;
	}
	
	// 待办标题
	.n-titles{
		height:80rpx;
		margin-top:20rpx;
		position:relative;
	}
	
	.n-titles .n-t-text{
		display:inline-block;
		font-weight:bold;
		line-height:80rpx;
		width:30%;
		position:absolute;
		top:0;
		left:0;
	}
	
	.n-titles .n-t-input{
		display:inline-block;
		height:80rpx;
		text-align: center;
		width:70%;
		border-bottom: 1px solid gray;
		position:absolute;
		top:0;
		right:0;
	}
	
	// 待办开始时间
	.n-time-start,.n-time-end{
		margin-top:10%;
		position: relative;
	}
	
	
	.n-time-start .n-title,.n-time-end .n-title{
		display:inline-block;
		font-weight:bold;
		line-height:80rpx;
		width:30%;
	}
	
	.n-time-start .left,.n-time-end .left,.n-time-start .right,.n-time-end .right{
		display:inline-block;
		border: 1px solid gray;
		color:gray;
		line-height:80rpx;
		width:30%;
		text-align:center;
	}
	
	.n-time-start .right,.n-time-end .right{
		position: absolute;
		top:-84rpx;
		right:0;
	}
	
	// 待办新建按钮
	.n-n-btn{
		width:92%;
		color:white;
		margin-top:30%;
		border:1px solid red;
		position:absolute;
		text-align:center;
		line-height:80rpx;
		border:1px solid gray;
		background:#0076FF;
		bottom:10%;
		height:80rpx;
		border-radius:10rpx;
	}
</style>
